import React from 'react';
import MainLayout from '@/components/layout/MainLayout';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import {
  faUser,
  faGear,
  faBell,
  faMedal,
  faHeart,
  faPersonRunning,
  faSeedling,
  faMoon,
  faLock,
  faCrown,
  faChartLine,
  faFileMedical,
  faStopwatch,
  faBullseye,
  faChevronRight,
  faCircleQuestion,
  faInfoCircle,
  faEllipsis,
  faCalendarCheck,
  faGift,
  faHeadset,
  faWallet,
  faMessage
} from '@fortawesome/free-solid-svg-icons';

export default function Profile() {
  return (
    <MainLayout title="HealthHub - 个人中心">
      {/* 顶部个人信息区域 */}
      <div className="relative">
        {/* 背景图 */}
        <div className="h-40 bg-gradient-to-r from-primary to-indigo-600"></div>
        
        {/* 设置按钮 */}
        <div className="absolute top-4 right-4 flex space-x-3">
          <button className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white">
            <FontAwesomeIcon icon={faBell} />
          </button>
          <button className="w-8 h-8 bg-white/20 rounded-full flex items-center justify-center text-white">
            <FontAwesomeIcon icon={faGear} />
          </button>
        </div>
        
        {/* 用户信息卡片 */}
        <div className="bg-white rounded-xl -mt-20 mx-4 p-4 shadow-sm relative z-10">
          <div className="flex">
            {/* 头像 */}
            <div className="w-20 h-20 rounded-full bg-gray-200 border-4 border-white overflow-hidden -mt-12 shadow">
              <img src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?auto=format&fit=crop&w=200" 
                   alt="用户头像" className="w-full h-full object-cover" />
            </div>
            
            {/* 用户基本信息 */}
            <div className="ml-4 mt-1 flex-1">
              <div className="flex justify-between items-center">
                <h1 className="text-xl font-bold">张健康</h1>
                <button className="px-3 py-1 text-xs bg-primary/10 text-primary rounded-full">编辑资料</button>
              </div>
              <p className="text-sm text-gray-500 mt-1">ID: health_2024</p>
              <p className="text-sm mt-2">让健康成为一种生活方式 💪</p>
            </div>
          </div>
          
          {/* 数据统计 */}
          <div className="flex justify-between mt-4 pt-4 border-t border-gray-100">
            <div className="text-center">
              <p className="font-bold">128</p>
              <p className="text-xs text-gray-500">关注</p>
            </div>
            <div className="text-center">
              <p className="font-bold">356</p>
              <p className="text-xs text-gray-500">粉丝</p>
            </div>
            <div className="text-center">
              <p className="font-bold">86</p>
              <p className="text-xs text-gray-500">动态</p>
            </div>
            <div className="text-center">
              <p className="font-bold">42</p>
              <p className="text-xs text-gray-500">收藏</p>
            </div>
          </div>
        </div>
        
        {/* 成就卡片 */}
        <div className="bg-white rounded-xl mt-4 mx-4 p-4 shadow-sm">
          <div className="flex justify-between items-center mb-4">
            <h2 className="font-medium">我的成就</h2>
            <button className="text-xs text-primary">查看全部</button>
          </div>
          <div className="flex space-x-4 overflow-x-auto pb-2">
            <div className="flex-shrink-0 w-16">
              <div className="w-16 h-16 rounded-full bg-yellow-100 flex items-center justify-center">
                <FontAwesomeIcon icon={faPersonRunning} className="text-yellow-500 text-xl" />
              </div>
              <p className="text-center text-xs mt-1">运动达人</p>
            </div>
            <div className="flex-shrink-0 w-16">
              <div className="w-16 h-16 rounded-full bg-green-100 flex items-center justify-center">
                <FontAwesomeIcon icon={faSeedling} className="text-green-500 text-xl" />
              </div>
              <p className="text-center text-xs mt-1">健康生活</p>
            </div>
            <div className="flex-shrink-0 w-16">
              <div className="w-16 h-16 rounded-full bg-blue-100 flex items-center justify-center">
                <FontAwesomeIcon icon={faMedal} className="text-blue-500 text-xl" />
              </div>
              <p className="text-center text-xs mt-1">跑步精英</p>
            </div>
            <div className="flex-shrink-0 w-16">
              <div className="w-16 h-16 rounded-full bg-purple-100 flex items-center justify-center">
                <FontAwesomeIcon icon={faMoon} className="text-purple-500 text-xl" />
              </div>
              <p className="text-center text-xs mt-1">睡眠达人</p>
            </div>
            <div className="flex-shrink-0 w-16">
              <div className="w-16 h-16 rounded-full bg-gray-100 flex items-center justify-center opacity-40">
                <FontAwesomeIcon icon={faLock} className="text-gray-400 text-xl" />
              </div>
              <p className="text-center text-xs mt-1 text-gray-400">未解锁</p>
            </div>
          </div>
        </div>
      </div>

      {/* 功能模块区域 */}
      <div className="p-4">
        {/* 会员卡 */}
        <div className="bg-gradient-to-r from-yellow-500 to-amber-500 rounded-xl p-4 text-white shadow-sm mb-5">
          <div className="flex justify-between items-center">
            <div>
              <h3 className="font-semibold">HealthHub Premium</h3>
              <p className="text-sm opacity-90 mt-1">尊享高级会员特权</p>
            </div>
            <button className="px-3 py-1 bg-white text-amber-500 rounded-full text-xs font-medium">立即开通</button>
          </div>
          <div className="flex items-center mt-3">
            <div className="flex -space-x-1">
              <div className="w-6 h-6 rounded-full border-2 border-amber-500 bg-white text-amber-500 flex items-center justify-center text-xs">
                <FontAwesomeIcon icon={faCrown} />
              </div>
              <div className="w-6 h-6 rounded-full border-2 border-amber-500 bg-white text-amber-500 flex items-center justify-center text-xs">
                <FontAwesomeIcon icon={faChartLine} />
              </div>
              <div className="w-6 h-6 rounded-full border-2 border-amber-500 bg-white text-amber-500 flex items-center justify-center text-xs">
                <FontAwesomeIcon icon={faHeart} />
              </div>
            </div>
            <span className="text-xs opacity-90 ml-2">解锁高级数据分析，个性化健康建议等多项特权</span>
          </div>
        </div>

        {/* 功能快捷入口 */}
        <div className="bg-white rounded-xl shadow-sm mb-5 divide-y divide-gray-100">
          {/* 健康档案 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faFileMedical} className="text-blue-500" />
                </div>
                <div>
                  <h3 className="font-medium">我的健康档案</h3>
                  <p className="text-xs text-gray-500 mt-1">管理个人健康记录和报告</p>
                </div>
              </div>
              <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
            </a>
          </div>
          
          {/* 我的设备 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-green-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faStopwatch} className="text-green-500" />
                </div>
                <div>
                  <h3 className="font-medium">我的设备</h3>
                  <p className="text-xs text-gray-500 mt-1">管理已连接的健康设备</p>
                </div>
              </div>
              <div className="flex items-center">
                <span className="text-xs bg-green-100 text-green-600 px-2 py-0.5 rounded mr-2">2个设备已连接</span>
                <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
              </div>
            </a>
          </div>
          
          {/* 目标设置 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-10 h-10 rounded-full bg-indigo-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faBullseye} className="text-indigo-500" />
                </div>
                <div>
                  <h3 className="font-medium">目标设置</h3>
                  <p className="text-xs text-gray-500 mt-1">设置和管理您的健康目标</p>
                </div>
              </div>
              <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
            </a>
          </div>
        </div>

        {/* 其他功能入口 */}
        <div className="bg-white rounded-xl shadow-sm mb-6">
          <div className="grid grid-cols-4 gap-4 p-4">
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-red-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faHeart} className="text-red-500" />
              </div>
              <span className="text-xs">健康评估</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-purple-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faMedal} className="text-purple-500" />
              </div>
              <span className="text-xs">我的勋章</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-blue-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faMessage} className="text-blue-500" />
              </div>
              <span className="text-xs">我的咨询</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-green-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faWallet} className="text-green-500" />
              </div>
              <span className="text-xs">健康钱包</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-amber-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faCalendarCheck} className="text-amber-500" />
              </div>
              <span className="text-xs">健康日记</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-pink-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faGift} className="text-pink-500" />
              </div>
              <span className="text-xs">健康商城</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-teal-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faHeadset} className="text-teal-500" />
              </div>
              <span className="text-xs">客户服务</span>
            </a>
            <a href="#" className="flex flex-col items-center">
              <div className="w-12 h-12 rounded-xl bg-gray-100 flex items-center justify-center mb-1">
                <FontAwesomeIcon icon={faEllipsis} className="text-gray-500" />
              </div>
              <span className="text-xs">更多</span>
            </a>
          </div>
        </div>

        {/* 设置与帮助 */}
        <div className="bg-white rounded-xl shadow-sm mb-8 divide-y divide-gray-100">
          {/* 系统设置 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faGear} className="text-gray-500" />
                </div>
                <h3 className="font-medium">系统设置</h3>
              </div>
              <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
            </a>
          </div>
          
          {/* 隐私设置 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faLock} className="text-gray-500" />
                </div>
                <h3 className="font-medium">隐私设置</h3>
              </div>
              <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
            </a>
          </div>
          
          {/* 帮助中心 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faCircleQuestion} className="text-gray-500" />
                </div>
                <h3 className="font-medium">帮助中心</h3>
              </div>
              <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
            </a>
          </div>
          
          {/* 关于我们 */}
          <div className="p-4">
            <a href="#" className="flex items-center justify-between">
              <div className="flex items-center">
                <div className="w-8 h-8 rounded-lg bg-gray-100 flex items-center justify-center mr-3">
                  <FontAwesomeIcon icon={faInfoCircle} className="text-gray-500" />
                </div>
                <h3 className="font-medium">关于我们</h3>
              </div>
              <FontAwesomeIcon icon={faChevronRight} className="text-gray-300" />
            </a>
          </div>
        </div>
      </div>
    </MainLayout>
  );
} 